好，目前已將 Firebase 的服務都設定的差不多了，接下來就是一一實作將功能與頁面結合。

提示訊息元件

在實作之前，我們來建立一個提示訊息元件，因為串接功能後，會有許多需要提示訊息的情境，先前篇幅中都是使用 Tailwind 搭配手刻製作，今天使用 react-toasitify 套件來客製化使用吧！

1. 在 terminal 中執行安裝指令

npm i react-toastify

2. 在需要使用的頁面，引用 的調用函式和樣式

import { ToastContainer, toast } from 'react-toastify';
import "react-toastify/dist/ReactToastify.css";

3. 於頁面中放置一個所需的容器定位點，以 React.js 框架來說大概像這樣

const YourPage = () => {
    return (
        <div>
            // some code...
            <ToastContainer />
        </div>
    )
}

4. 新增要顯示成功訊息的標準寫法到頁面中(以下為官方範例寫法)

const YourPage = () => {
    const notify = (status, content) => {
        toast.success("Success Notification !", {
            position: toast.POSITION.TOP_CENTER
        });
    };
    
    return (
        <div>
            // some code...
            <ToastContainer />
        </div>
    )
}

5. 封裝這個頁面可以重複呼叫的 function（以下為我自己稍微整理後的寫法）
   理念是先將統一樣式的設定內容提取出來命為 showNotify，於呼叫 function 的外層加入自定義的參數，分別為狀態(status)和文字內容(content)，依照想呈現的樣式呼叫套件提供的調用函式。

const YourPage = () => {
    const showNotify = (status, content) => {
        const notifySetting = {
          position: toast.POSITION.TOP_CENTER,
          autoClose: 5000,
          hideProgressBar: false,
          newestOnTop: false,
          closeOnClick: true,
          rtl: false,
          pauseOnFocusLoss: true,
          draggable: true,
          pauseOnHover: true,
          theme: "light"
        }

        if(status === "success") {
          toast.success(content, notifySetting);
        } else if (status === "error") {
          toast.error(content, notifySetting);
        }
    };
    
    return (
        <div>
            <button onClick={() => showNotify("success", "這是一段成功訊息")}>Notify</button>
            <button onClick={() => showNotify("error", "這是一段錯誤訊息")}>Notify</button>
            <ToastContainer />
        </div>
    )
}

使用者註冊

1. 首先在 firebase.js (firebase SDK)裡，引入身分驗證的方法，並初始化它。

import { getAuth } from "firebase/auth";

const auth = getAuth(app);

2. 在註冊表單頁面中，引用方法

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

3. 在送出表單的 onSubmit 事件中調用引用的註冊方法(createUserWithEmailAndPassword)，使用 try catch 即可在網頁控制台中查看 api 呼叫結果。

重要資訊：呼叫 createUserWithEmailAndPassword 時，一定要將 auth, email, password 這三個參數放在最前面，如果因為網站設計需求有其他的必傳欄位，需要在這三個參數後面插入，否則會導致 api 出錯唷。

async function onSubmit(e) {
    e.preventDefault();

    try {
      const auth = getAuth();
      const userCredential = await createUserWithEmailAndPassword(
        auth,
        email,
        password,
        role
      );

      const user = userCredential.user;
      console.log(result);
    } catch (error) {
      console.log(error.message)
    }

4. 在驗證完成後，加上提示訊息的元件，讓畫面更加完整。

async function onSubmit(e) {
    e.preventDefault();

    try {
      const auth = getAuth();
      const userCredential = await createUserWithEmailAndPassword(
        auth,
        email,
        password,
        role
      );

      const user = userCredential.user;
      showNotify("success", "註冊成功");
    } catch (error) {
      showNotify("error", "註冊失敗");
    }

5. 至 Firebase console 控制台中確認目前資料，可以看到目前已經成功的註冊幾個測試會員。
   

小結

1. 官方文件：開始在網站上使用 Firebase 身份驗證
2. react-toastify